<!--
 * @Author: 471826078@qq.com
 * @Date: 2020-05-18 17:27:17
 * @LastEditors: younghxp
 * @LastEditTime: 2022-03-15 17:37:36
-->
<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon" style="top: 198px">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="网点名称" class="row-padding-bottom">
              <el-input
                placeholder="请输入"
                clearable
                v-model="filterField.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              v-sdc
              class="searchBtn"
              @click="searchList"
            >
              <span>搜索</span>
            </el-button>
            <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="searchBtn">
              <span>搜索</span>
            </el-button> -->
            <exportBtn
              v-if="!(isShowAdd && !isBankSiteId)"
              :dataLen="tableList.length"
              :filterField="filterField"
              api="api-s/report/export_YH_ACCOUNT_BANK"
            ></exportBtn>
          </el-form-item>
          <!-- <el-form-item>
            <exportBtn :dataLen="tableList.length" :filterField="filterField" api="api-s/report/export_YH_ACCOUNT_BANK"></exportBtn>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont icontianjia"
              class="searchBtn"
              v-sdc
              @click="roleAdd"
              v-show="isShowAdd && !isBankSiteId"
            ><span>添加</span></el-button>
          </el-form-item> -->
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px" v-if="isShowAdd && !isBankSiteId">
          <exportBtn
            :dataLen="tableList.length"
            :filterField="filterField"
            api="api-s/report/export_YH_ACCOUNT_BANK"
          ></exportBtn>
          <el-button
            type="primary"
            icon="icon iconfont icontianjia"
            class="searchBtn"
            v-sdc
            @click="roleAdd"
            ><span>添加</span></el-button
          >
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
          @sort-change="sortChange"
        >
          <!-- <el-table-column prop="name" label="网点名称" align="center" :formatter="formatTd"></el-table-column> -->
          <el-table-column label="网点名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.name"
                :columnName="'name'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="address" label="网点地址" align="center" :formatter="formatTd"></el-table-column> -->
          <el-table-column label="网点地址" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.address"
                :columnName="'address'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="telNumber"
            label="网点电话"
            :formatter="formatTd"
            min-width="160"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.telAreaCode }}-{{ scope.row.telNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="manager"
            label="负责人"
            :formatter="formatTd"
            min-width="140"
          ></el-table-column>
          <el-table-column
            prop="managerTel"
            label="联系电话"
            :formatter="formatterPhone"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="accountTotal"
            sortable="custom"
            label="开户数"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            label="操作"
            :formatter="formatTd"
            width="220"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-show="isShowDetailBtn"
                @click="roleDetail(scope.row)"
                >查看详情</el-link
              >
              <el-link
                type="primary"
                v-show="isShowUpdate"
                @click="modify(scope.row)"
                >修改</el-link
              >
              <el-link
                type="primary"
                @click="deleteRole(scope.row)"
                v-sdc
                v-if="
                  scope.row.accountTotal === 0 && isShowDel && !isBankSiteId
                "
                >删除</el-link
              >
              <span
                v-show="
                  (!isShowDetailBtn &&
                    !isShowUpdate &&
                    scope.row.accountTotal != 0) ||
                  !isShowDel
                "
                >--</span
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
      <!-- 新增网点 弹窗 -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="centerDialogVisible"
        width="900px"
        @close="resetForm('ruleForm')"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
          style="margin-top: 8px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="网点名称：" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入网点全称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="errorSty">
              <el-form-item label="网点电话：" prop="telAreaCode">
                <el-input
                  v-model="form.telAreaCode"
                  placeholder="区号"
                  class="telAreaCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="-"
                prop="telNumber"
                class="telNumber"
                label-width="35px"
              >
                <el-input
                  v-model="form.telNumber"
                  placeholder="请输入网点座机号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="网点地址：" prop="address">
                <el-input
                  v-model="form.address"
                  placeholder="请输入网点详细地址 "
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人：" prop="manager">
                <el-input
                  v-model="form.manager"
                  placeholder="请输入网点负责人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-form-item label="联系电话：" prop="managerTel">
                <el-input
                  v-model="form.managerTel"
                  placeholder="请输入网点负责人联系电话"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button
            @click="
              resetForm('ruleForm')
              centerDialogVisible = false
            "
            class="cancel"
            >取 消</el-button
          >
          <el-button
            type="primary"
            class="save"
            @click="submitForm('ruleForm')"
            :loading="isSaveLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'bankBranchList',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '网点列表',
      tableList: [],
      requestUrl: '/api-acc/accountbank/expand/list',
      isShow: false, //列表加载
      loading: false,
      filterField: {
        name: '',
      },
      pageSize: 20,
      pageNo: 1,
      form: {
        id: '',
        name: '',
        telAreaCode: '',
        telNumber: '',
        address: '',
        manager: '',
        managerTel: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入网点全称', trigger: 'blur' },
          { min: 3, max: 100, message: '长度在100个字符以内', trigger: 'blur' },
        ],
        telAreaCode: [
          // { required: true, message: "请输入区号", trigger: "blur" },
          {
            min: 3,
            max: 4,
            message: '请输入3位或者4位区号',
            trigger: 'blur',
            required: true,
          },
        ],
        telNumber: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          {
            min: 7,
            max: 8,
            message: '请输入7位或者8位电话号码',
            trigger: 'blur',
          },
        ],
        address: [
          { required: true, message: '请输入网点详细地址', trigger: 'blur' },
          { min: 3, max: 200, message: '长度在200个字符以内', trigger: 'blur' },
        ],
        manager: [
          { required: true, message: '请输入网点负责人姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在20个字符以内', trigger: 'blur' },
        ],
        managerTel: [
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
      },
      dialogTitle: '添加网点',
      centerDialogVisible: false,
      //   isShowDetail: false,
      //   detailInfo: {},
      //   detailList: [],
      isShowAdd: '',
      isShowDetailBtn: '',
      isShowDel: '',
      isShowUpdate: '',
      isBankSiteId: '',
      isSaveLoading: false,
    }
  },
  created() {
    this.getCurrent()
    this.centerDialogVisible = false
    // this.onload('')
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('bankBranchList:add') > -1
    this.isShowDetailBtn =
      this.$store.state.buttonLimitsArr.indexOf('bankBranchList:detail') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('bankBranchList:update') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('bankBranchList:delete') > -1
  },
  mounted() {
    var that = this
    this.$nextTick(function () {
      that.$refs.pagination.getTableListData()
    })
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    dateForma(row, column) {
      const daterc = row[column.property]
      if (daterc) {
        return this.toFixed(daterc, 2)
      } else {
        return '--'
      }
    },
    formatterPhone(row, column, cellValue, index) {
      if (cellValue === 0) {
        return '0'
      } else if (!cellValue || cellValue == null || cellValue == undefined) {
        return '--'
      } else {
        return (
          cellValue.substring(0, 3) +
          '****' +
          cellValue.substring(cellValue.length - 4)
        )
      }
    },
    /**
     * @name: 获取银行网点列表
     * @param {String} name
     * @Author: 471826078@qq.com
     */
    onload(name) {
      this.axios
        .post('api-acc/accountbank/expand/list', { name })
        .then((res) => {
          this.tableList = res.data.result.results
        })
        .catch((error) => {
          this.$message({
            message: '获取网点数据失败',
            type: 'error',
          })
        })
    },
    /**
     * @name: 新增网点
     * @param {}
     * @Author: 471826078@qq.com
     */
    roleAdd() {
      this.centerDialogVisible = true
      this.dialogTitle = '新增网点'
      this.form = {
        id: '',
        name: '',
        telAreaCode: '',
        telNumber: '',
        address: '',
        manager: '',
        managerTel: '',
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /**
     * @name: 修改网点
     * @param {id}
     * @Author: 471826078@qq.com
     */
    modify(item) {
      this.centerDialogVisible = true
      this.dialogTitle = '修改网点信息'
      const { id, name, telAreaCode, telNumber, address, manager, managerTel } =
        item
      this.form = {
        id,
        name,
        telAreaCode,
        telNumber,
        address,
        manager: manager,
        managerTel: managerTel,
      }
    },
    /**
     * @name: 保存新增网点
     * @param {type}
     * @Author: 471826078@qq.com
     */
    submitForm(formName) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          const {
            id,
            name,
            telAreaCode,
            telNumber,
            address,
            manager,
            managerTel,
          } = this.form
          let url = ''
          let data = {}
          if (id) {
            url = 'api-acc/accountbank/expand/update'
            data = {
              id,
              name,
              telAreaCode,
              telNumber,
              address,
              manager,
              managerTel,
            }
          } else {
            url = 'api-acc/accountbank/expand/add'
            data = {
              name,
              telAreaCode,
              telNumber,
              address,
              manager,
              managerTel,
            }
          }
          this.axios.post(url, data).then((res) => {
            if (!res.data.hasError) {
              this.centerDialogVisible = false
              this.isSaveLoading = false
              this.$message({
                type: 'success',
                message: id ? '修改成功' : '保存成功！',
              })
              if (id) {
                this.$nextTick(function () {
                  that.$refs.pagination.getTableListData(
                    this.pageNo,
                    this.pageSize
                  )
                })
              } else {
                this.$nextTick(function () {
                  that.$refs.pagination.getTableListData()
                })
              }
            } else {
              this.$message({
                type: 'error',
                message: res.data.errorMsg,
              })
              this.isSaveLoading = false
            }
          })
        } else {
          return false
          this.isSaveLoading = false
        }
      })
    },
    searchList() {
      var that = this
      this.$nextTick(function () {
        that.$refs.pagination.getTableListData()
      })
    },
    roleDetail(row) {
      this.$router.push({
        path: '/home/enShiCustomRequirements/bankBranchDetail',
        name: 'bankBranchDetail',
        query: {
          bankSiteId: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enShiCustomRequirements/bankBranchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    deleteRole(item) {
      var that = this
      const { id } = item
      this.$confirm('确认删除改网点吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.axios
            .post('api-acc/accountbank/expand/delete', { id })
            .then((res) => {
              if (!res.data.hasError) {
                this.$nextTick(function () {
                  that.$refs.pagination.getTableListData(
                    this.pageNo,
                    this.pageSize
                  )
                })
                this.$message({
                  type: 'success',
                  message: '删除成功 !',
                })
              } else {
                this.$message({
                  type: 'warning',
                  message: res.data.errorMsg,
                })
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    getCurrent() {
      this.axios({
        method: 'get',
        url: 'api-u/users/current',
      })
        .then((response) => {
          if (response.data.bankSiteId) {
            this.isBankSiteId = true
          } else {
            this.isBankSiteId = false
          }
        })
        .catch((resp) => {})
    },
  },
}
</script>
<style lang="less" scoped>
.input214 {
  width: 214px;
}
@import '../../../static/css/filterArea.less';
</style>
